<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <input type="text" id="strInput">
     <input type="button" value="小写变大写" id="button1">
      <input type="button" value="大写变小写" id="button2">
      <script>
      //函数
      function deal(e){

        let strInput=  document.getElementById('strInput');
            let str=strInput.value;
            //e代表着点击事件中所有的信息，e.target代表被点击的html控件
            if(e.target==button1){
str=str.toUpperCase();
            }else{
str=str.toLowerCase();
      }
            
            strInput.value=str;
      }
   
      let button1=document.getElementById('button1');
      button1.onclick=deal;
      let  buttom2=document.getElementById('button2');
   button2.onclick=deal;
      </script>
</body>
</html>